<input type="text">
<ul></ul>

<script>
    // 获取input绑定值改变事件
    let iptObj = document.querySelector('input')
    iptObj.oninput = function () {
        // 事件处理函数  ajax 4步骤
        // 第一步： 创建xhr对象
        const xhr = new XMLHttpRequest

        // 第二步： 监听请求状态
        xhr.onreadystatechange = function () {
            // 如果等于4 表示后端发送数据回来了
            if (xhr.readyState === 4) {
                // 状态码200表示请求发送成功
                if (xhr.status === 200) {
                    // 3 事件处理函数中 -> 拿到数据之后
                    let res = JSON.parse(xhr.responseText)
                    console.log(res);
                    if (res && res.g) {
                        //  清空ul数据 防止后续第二次累计
                        document.querySelector('ul').innerHtml = ''
                        //  遍历 -> 造li -> 追加到ul中   results
                        res.g.forEach(item => {
                            let liObj = document.createElement('li')
                            liObj.innerText = item.q
                            document.querySelector('ul').appendChild(liObj)
                        })
                    } else {
                        document.querySelector('ul').innerHTML = `<li>数据没找到</li>`
                    }
                } else {
                    console.log(xhr.status);
                }
            }
        }
        // 定义inputdata
        let inputdata = document.querySelector('input').value
        // 第三步： 设置请求方式、 请求地址 open    
        xhr.open('get',
            `http://www.baidu.com/sugrec?prod=pc&wd=${inputdata}`
        )

        // 第四步： 发送 send
        xhr.send()
    }
</script>